<template>
  <div>
    <!-- 用户频道 -->
    <div class="myChannel">
      <van-cell title="我的频道">
        <van-button
          @click="isEdit=!isEdit"
          type="danger"
          size="mini"
        >{{isEdit? '取消':'编辑'}}</van-button>
      </van-cell>
      <van-grid>
        <van-grid-item
          v-for="(channels, idx) in channel"
          :key="channels.id"
          @click="hTestMyChannel(idx)"
          :class="{red: activeId===idx}"
        >
          {{channels.name}}
          <div
            class="cross-btn"
            v-if="isEdit"
          >
            <van-icon name="cross" />
          </div>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 可选择频道 -->
    <div class="myChannel">
      <van-grid>
        <van-cell title="可订阅频道">

        </van-cell>
        <van-grid-item
          v-for="restChannel in restChannels"
          :key="restChannel.id"
          @click="hChangeChannel(restChannel)"
        >
          {{restChannel.name}}
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>
<script>
import { getAllChannel, changeChannel, delChannel } from '../../api/channel.js'
export default {
  data () {
    return {
      // 所有频道
      allChannels: [],
      isEdit: false
    }
  },
  // 父传子得到用户频道
  props: ['channel', 'activeId'],
  created () {
    this.getChannel()
  },
  computed: {
    // 所有频道减用户频道得到可选择频道
    restChannels () {
      const arr = this.allChannels.filter(item => {
        const idx = this.channel.findIndex(channel => item.id === channel.id)
        if (idx === -1) {
          return true
        }
      })
      return arr
    }
  },
  methods: {
    hTestMyChannel (idx) {
      if (this.isEdit) {
        this.delMyChannel(idx)
      } else {
        this.$emit('channel-active', idx)
      }
    },
    async delMyChannel (idx) {
      try {
        // console.log('删除', idx)
        const id = this.channel[idx].id
        const res = await delChannel(id)
        console.log('xxx', res)
        if (this.activeId > idx) {
          this.$emit('sub-active')
        }
        this.channel.splice(idx, 1)
        this.$toast.success('删除成功')
      } catch (err) {
        console.log(err)
        this.$toast.fail('删除失败')
      }
    },
    async getChannel () {
      try {
        // 获取所有频道发请求
        const res = await getAllChannel()
        console.log(res)
        this.allChannels = res.data.data.channels
      } catch (err) {
        console.log(err)
      }
    },
    // 修改频道 添加到我的频道列表
    async hChangeChannel (restChannel) {
      try {
        console.log(restChannel)
        // 设置请求数组格式
        const requestArr = [...this.channel, restChannel].map((item, idx) => {
          return {
            id: item.id,
            seq: idx
          }
        })
        console.log('arr', requestArr)
        requestArr.splice(0, 1)
        // 获取所有频道发请求
        const res = await changeChannel(requestArr)
        this.channel.push(restChannel)
        console.log('修改频道', res)
        this.$toast.success('选择成功')
      } catch (err) {
        console.log(err)
        this.$toast.fail('失败')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.myChannel {
  position: relative;
  padding: 16px;
  font-size: 12px;
}
.red {
  color: red;
  font-weight: bold;
}
.cross-btn {
  position: absolute;
  right: 5px;
  top: 0;
}
</style>
